<template>
  <div>
    <Header back="Home"></Header>
    <flexbox>
      <flexbox-item>
        <div class="user_box">
          <a class="userPic">
            <img :src="userInfo.userIcon" alt="">
          </a>
          <div class="user_info">
            <p class="user_nick">
              <a>{{userInfo.userNickname}}</a>
              <a class="info" @click="goUserinfo">个人资料</a>
            </p>
          </div>
        </div>
      </flexbox-item>
    </flexbox>
    <group>
      <cell title="充值" @click.native="goPaycenter" :value="'余额：'+userInfo.userKb+'K币'" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_1.png" alt="">
      </cell>
      <cell title="开通包月" @click.native="goKtbaoyue" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_2.png" alt="">
      </cell>
      <cell title="包月书库" value="包月免费读" is-link @click.native="goBaoyuelist">
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_3.png" alt="">
      </cell>
      <cell title="我的代金券" value="3" @click.native="goVoucher" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_4.png" alt="">
      </cell>
    </group>
    <group>
      <cell title="我的书架" @click.native="gobookinfo" value="2本书更新" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_7.png" alt="">
      </cell>
      <cell title="我的评论" @click.native="gocomment" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_8.png" alt="">
      </cell>
      <cell title="我的消息" @click.native="goMynews" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_8.png" alt="">
          <badge :text="totalRows"></badge>
      </cell>
    </group>
    <group>
      <cell title="我的书籍" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_10.png" alt="">
      </cell>
    </group>
    <group>
      <cell title="作者中心" @click.native="goAuthorCenter" is-link>
          <img slot="icon" class="cell_icon" src="http://img.17k.com/touch/skin/usercenter/new_icon/icon_11.png" alt="">
      </cell>
    </group>
    <group>
        <div style="padding:10px;"> 
                <x-button type="warn" @click.native="loginOut">退出登陆</x-button>
        </div>  
    </group>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
import USER from '@/utils/user'
import userController from '@/api/userController/index'
import {mapActions} from 'vuex'
  export default {
    name:'usercenter',
    data(){
      return {
        userInfo: null,
        totalRows: 0
      }
    },
    components: {Header,Footer},
    created(){
      this.getLoginInfo();    
    },
    beforeRouteEnter: (to, from, next) => {
      if(from.name=='login'){
         location.reload() 
      }
      next();
    },
    methods:{
      ...mapActions([
        'clearUserInfo'
      ]),
      getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
        var loginInfo = USER.getUserInfo();
        this.userInfo = loginInfo;
        if(loginInfo.isLogin==1){ //0已登录 1未登录
          this.$router.push({name:'login'})
        }else{
          this.getTotalCount(); //获取消息数量
        }
      },
      getTotalCount(){ //获取消息数量
        var formData = {
          userId: this.userInfo.userId,
          status: 0
        }
        userController.getTotalCount(formData).then(response=>{
          this.totalRows = response.totalRows;
        })
      },
      goUserinfo(){
        this.$router.push({name:'userinfo'})
      },
      goPaycenter(){
        this.$router.push({name:'paycenter'})
      },
      goKtbaoyue(){
        this.$router.push({name:'ktbaoyue'})
      },
      goBaoyuelist () { //包月书库
        this.$router.push({name:'Monthly'})
      },
      goVoucher () { //代金卷
        this.$router.push({name:'voucher'})
      },
      gobookinfo () { //书架
        this.$router.push({name:'Bookshelf'})
      },
      gocomment () { //评论
        this.$router.push({name:'mycomment'})
      },
      goMynews () { //我的消息
        this.$router.push({name:'mynews'})
      },
      goAuthorCenter () {//作者中心
        //如果已经是作者，则跳转至作者中心。否则跳转至成为作者的界面
        if(this.userInfo.userCustominfo5){ //userCustominfo5 笔名 如果存在笔名，即为作者
          this.$router.push({name: 'authorCenter'})
        }else{
          this.$router.push({name: 'penName'})
        }
      },
      loginOut () { //退出登录
        userController.loginOut().then(reponse=>{
          if(reponse.success){            
            this.clearUserInfo();
            this.$router.push({name: 'Home'})
            location.reload() 
          }
        })
      }
    }
  }
</script>

<style scoped>
  .cell_icon{
    padding-top: 5px;
    padding-right: 6px;
    width: 20px;
  }
  .user_box{
    height: 84px;
    background-image: url(../../assets/img/userbg.jpg);
    background-repeat: no-repeat;
    background-size: over;
    padding:14px;
  }
  .userPic{
    display: block;
    float:left;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
  }
  .userPic img{
    width: 56px;
    height:56px;
  }
  .user_info{
    float:left;
    width: 220px;
    height: 56px;
    margin-left: 7px;
    color: #fff;
  }
  .user_info .user_nick{
    margin:7px 0 7px 7px;
  }
  .user_info .user_nick a{
    color: #fff;
    display: block;
  }
  .user_info .user_nick .info{
    display:inline-block;
    margin-top:5px;
    border-radius: 1em;
    line-height: 2em;
    color: #fff;
    font-size: .8em;
    padding: 0 1em 0 3em;
    vertical-align: top;
    background: url(../../assets/img/user_icon.png) no-repeat 1.5em center rgba(255,255,255,.25);
    -webkit-background-size: 13px 13px;
    background-size: 13px 13px;
  }
</style>
